<template>
  <div class="home-page">
    <div class="section">
      <h2 class="section-title">路由跳转示例</h2>
      <div class="card">
        <p>当前页面：首页</p>
        <el-button type="primary" @click="goToAbout">跳转到关于页</el-button>
      </div>
    </div>

    <div class="section">
      <h2 class="section-title">父子组件传参</h2>
      <div class="card">
        <ChildComponent
            :parent-msg="message"
            @child-event="handleChildEvent"
        />
        <p style="margin-top: 20px; font-weight: 500;">子组件回复：{{ childResponse }}</p>
      </div>
    </div>

    <div class="section">
      <h2 class="section-title">分页表格示例</h2>
      <div class="card">
        <el-table :data="tableData.slice((currentPage-1)*pageSize, currentPage*pageSize)"
                  border
                  style="width: 100%"
                  stripe>
          <el-table-column prop="id" label="ID" width="100" align="center" />
          <el-table-column prop="name" label="姓名" width="180" />
          <el-table-column prop="age" label="年龄" width="120" align="center" />
          <el-table-column prop="gender" label="性别" width="120" align="center">
            <template #default="scope">
              <el-tag :type="scope.row.gender === '男' ? 'primary' : 'danger'">
                {{ scope.row.gender }}
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="position" label="职位" />
          <el-table-column prop="salary" label="薪资" align="right">
            <template #default="scope">
              ¥{{ scope.row.salary.toLocaleString() }}
            </template>
          </el-table-column>
        </el-table>

        <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-sizes="[5, 10, 15]"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="tableData.length"
            class="pagination"
        />
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import ChildComponent from '../components/ChildComponent.vue'

// 路由跳转
const router = useRouter()
const goToAbout = () => router.push('/about')

// 父子组件传参
const message = ref('你好，这是来自父组件的消息！')
const childResponse = ref('')
const handleChildEvent = (msg) => {
  childResponse.value = msg
}

// 分页表格
const tableData = ref(generateTableData(30))
const currentPage = ref(1)
const pageSize = ref(5)

const handleSizeChange = (val) => {
  pageSize.value = val
  currentPage.value = 1
}

const handleCurrentChange = (val) => {
  currentPage.value = val
}

// 生成表格数据
function generateTableData(count) {
  const positions = ['前端开发', '后端开发', 'UI设计师', '产品经理', '测试工程师', '运维工程师']
  const names = ['张明', '李华', '王芳', '赵亮', '刘洋', '陈静', '杨帆', '周涛', '吴婷', '郑浩']

  return Array.from({ length: count }, (_, i) => ({
    id: i + 1,
    name: names[Math.floor(Math.random() * names.length)] + (i % 5),
    age: Math.floor(Math.random() * 20) + 22,
    gender: Math.random() > 0.5 ? '男' : '女',
    position: positions[Math.floor(Math.random() * positions.length)],
    salary: Math.floor(Math.random() * 20000) + 8000
  }))
}
</script>

<style scoped>
.home-page {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.pagination {
  margin-top: 20px;
  justify-content: flex-end;
}
</style>